<template>
  <div>
    <el-container>
      <el-aside :width="sideWidth + 'px'">
        <!-- 侧边栏 -->
        <side-menu :isCollapse="isCollapse"></side-menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <Header :CollapseIconClass="CollapseIconClass" :editStatus="editStatus"></Header>
        </el-header>
        <!-- 主界面 -->
        <el-main>
          <!-- <Tab></Tab> -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//引入组件
import SideMenu from "../components/SideMenu.vue";
import Header from "../components/Header.vue";
import Tab from "../components/Tab.vue"
export default {
  //注册组件
  components: {
    SideMenu,
    Header,
    Tab,
  },
  data() {
    return {
      isCollapse: false, //是否展开，默认不展开
      CollapseIconClass: 'el-icon-s-fold',//  展开/收缩后的图标变化
      sideWidth: 200 //默认展开时宽度为200px
    }
  },
  methods: {
    //   展开/收缩
    editStatus() {
      this.isCollapse = !this.isCollapse
      //  展开/收缩的宽度和图标保持一致
      if (this.isCollapse) {
        //收缩
        this.CollapseIconClass = 'el-icon-s-unfold'
        this.sideWidth = 64
      } else {
        //展开
        this.CollapseIconClass = 'el-icon-s-fold'
        this.sideWidth = 200
      }
    }
  }
}; 
</script>


<style scoped>
* {
  height: 100%;
}

/* 头部 */
.el-header {
  color: #333;
}

/* 左侧侧边栏 */
.el-aside {
  background-color: #304156;
  color: #fff;
  height: 100%;
}

/* 主窗口 */
.el-main {
  /* color: #333; */
  height: 100%;
  width: 100%;
  /* padding: 0 !important; */
}
</style>